<script type="text/javascript">
var info_temp_upload;
$(document).ready(function(){
/* Start Variable Declaration */
    var info_expander=$('#info_expander');
    var info_save=$("#info_save");
    var info_reset=$("#info_reset");
/* Form Component Declaration */
    $('.inputfield').jqxInput({ theme : global_theme });
    info_expander.jqxExpander({width: '100%', theme : global_theme, toggleMode : 'none', expanded : true});
    info_save.jqxButton();
    info_save.bind('click', function(e){ info_save_form(e); });
    info_reset.jqxButton();
    info_reset.bind('click', info_reset_form);
	$('#info_logo').fileupload({
		url : 'c_info/save',
        dataType: 'json',
		formData : {},
		autoUpload : false,
        add: function (e, data) {
			info_temp_upload = data;
        }
    });
/* Function Declaration */
    function info_reset_form(){
        $.ajax({
			url : 'c_info/get_info',
			method : 'POST',
			success : function(response){
				var res = JSON.parse(response);
				$("#info_logoviewer").html('<img src="files/'+ res.info_logo +'" class="img-responsive img-thumbnail">');
				$("#info_form").unserializeObject(res);
			}
		});
    }
    function info_save_form(e){
        e.preventDefault();
        var params = new Object();
        params.info_id=$('#info_id').val();
        params.form_data=$('#info_form').serializeObject();
        params=JSON.stringify(params);
		
		$('#info_logo').bind('fileuploadsubmit', function (e, data) {
			data.formData = {params : params};
		});
		$('info_logo').bind('fileuploaddone', function(){
			info_reset.click();
		});
		info_temp_upload.submit();
    }
	info_reset_form();
});
</script>
<div>
    <div id="info_expander" style="padding-bottom : 10px;">
        <div>Form Data Instansi</div>
        <div>
            <form class="form-horizontal" id="info_form" style="padding:10px;overflow:hidden;">
				<input type="hidden" id="info_id" name="info_id">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Nama Instansi</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="info_nama"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Alamat</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="info_alamat"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Kota</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="info_kota"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Telp.</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="info_telp"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Fax.</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="info_fax"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">E-mail</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="info_email"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Logo</label>
                    <div class="col-sm-4"><input id="info_logo" type="file" name="info_logo" ></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">&nbsp;</label>
                    <div class="col-sm-4"><div id="info_logoviewer"></div></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4 text-center">
                        <button type="button" id="info_save">Simpan</button>
                        <button type="reset" id="info_reset">Batal</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>